<template>
	<view class="px-[20rpx]">
		<view class="busnname mb-[20rpx] rounded-[20rpx]  bg-[#fff]">
			<view class="flex items-center">
				<view class="addres flex" @click="gotomap">
					<view class="mr-[10rpx] relative right-[2rpx]">
						<uv-icon name="map" size="16"></uv-icon>
					</view>
					<view class="line-clamp-2 relative right-[4rpx]">
						{{headtals.place}}
					</view>
				</view>
				<view class="telnuber " @click="isphoneprop=true">
					<image src="@/static/homeimg/telpho.svg" class="w-[40rpx] h-[40rpx]" mode="aspectFit">
					</image>
				</view>
			</view>
			<view class="flex px-[20rpx] mt-[30rpx]">
				<view class="mr-[10rpx] flex items-start relative top-[4rpx]">
					<image src="@/static/homeimg/time.svg" class="w-[25rpx] h-[25rpx]" mode="aspectFit">
					</image>
				</view>
				<view class="mr-[112rpx] board">
							<view>
								<text
									v-if="headtals.storeConfig.businessType==1 || headtals.storeConfig.businessDay.length==7">周一到周日</text>
								<text v-else>
									<template v-for="(item, index) in headtals.storeConfig.businessDay" :key="index">
										<text class="mr-[10rpx]">{{dayweek[item]}}</text>
									</template>
								</text>
								<text class="ml-[10rpx]" v-if="headtals.storeConfig.businessTimeType==1">24小时</text>
								<text class="ml-[10rpx] w-[100%]" v-else>
									<template >
										<text v-for="(item, index) in headtals.storeConfig.businessTime" :key="index" class="mr-[10rpx]">{{item}}</text>
									</template>
								</text>
							</view>
				</view>
			</view>
		</view>
		<view class="busnsimglist mb-[20rpx] rounded-[20rpx] boderbottom">
			<view class="flex items-center">
				<view class="mr-[10rpx] flex items-center">
					<image src="@/static/homeimg/busnaphto.svg" class="w-[30rpx] h-[30rpx]">
					</image>
				</view>
				<view class="line-clamp-1 flex items-center">
					商家相册
				</view>
			</view>
			<view class="imglsitscoll">
				<view class="imglists" v-for="(item,index) in headtals.logo" :key="index">
					<up-image :src="thumbImg(item)" width="190rpx" height="140rpx" radius="10rpx" class="imglists"
						@click="previewImg(headtals.logo,index)"></up-image>
				</view>
				<view class="bg-[#f6f6f6] mt-[20rpx] rounded-[10rpx] flex justify-center items-center"
					v-if="headtals.logo.length<1">
					<!-- <up-image src="@/static/homeimg/imagenull.png" width="190rpx" height="140rpx" radius="10rpx" class="imglists"
										></up-image> -->
					<image src="@/static/homeimg/imagenull.png" class="w-[190rpx] h-[140rpx] rounded-[10rpx]"
						mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="busnabottom rounded-[20rpx]">
			<view class="spsbiw" @click="gotoimg">
				<view class="felx font-[500] center">
					<image src="@/static/homeimg/spanq.svg" class="w-[35rpx] h-[35rpx] mr-[10rpx]">
					</image>
					商家资质
				</view>
				<view class="center">
					<u-icon name="arrow-right" size="14"></u-icon>
				</view>
			</view>
			<view class="spsbiws py-[20rpx]">
				<view class="relative top-[2rpx]">
					<up-image :src="peison" width="32rpx" height="32rpx"> </up-image>
				</view>
				<view class="titlkd">
					配送服务：
				</view>
				<view class="spstext text-[28rpx]">
					{{headtals.storeConfig.deliveryType.indexOf(1)==-1?"商家自配送":"点老板配送"}}
					{{headtals.storeConfig.deliveryType.indexOf(3)!==-1?"到店自取":""}}
				</view>
			</view>
			<view class="mt-[20rpx] ">
				<view class="spsbiws pb-[10rpx]">
					<view class="relative top-[6rpx] mr-[6rpx]">
						<image src="../../static/homeimg/notice.svg" class="w-[35rpx] h-[35rpx]"></image>
					</view>
					<view class="font-[500]">
						商家公告
					</view>
				</view>
				<view class="pb-[20rpx] pl-[41rpx] ">
					<view class="text-[28rpx] wordpid text-[#393939]">
						{{headtals.storeConfig.notice==""?'暂无公告':headtals.storeConfig.notice}}
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="isphoneprop" :safeAreaInsetBottom="true" @touchmove.stop.prevent="() => {}" catchtouchmoves
			v-if="isphoneprop" :round="10" mode="bottom" @close="closephone" @open="phoneopen">
			<view class="text-center pt-[30rpx] pb-[10rpx] text-[28rpx]">
				联系电话
			</view>
			<view class="flex text-[28rpx] py-[30rpx] items-center justify-center borderbototm"
				v-for="(item,index) in headtals.storeConfig.phones" :key="index" @click="makeCall(item.phone)">
				<view class="mr-[10rpx]">
					{{item.type==1?'商家电话':item.type==2?'售前电话':'售后电话'}}:
				</view>
				<view class="">
					{{item.phone}}
				</view>
			</view>
			<view class="h-[10rpx] bg-[#f5f5f5]">

			</view>
			<view class="text-center py-[20rpx]" @click="isphoneprop=false">
				取消
			</view>
		</u-popup>
	</view>

</template>

<script setup>
	import {
		thumbImg
	} from "@/utils/Server/imagescale.js"
	import {
		ref,
		defineProps,
		reactive,
		onMounted
	} from "vue"
	const isphoneprop = ref(false)
	import {
		onShow,
		onPageScroll,
		onReachBottom,
	} from "@dcloudio/uni-app"
	import peison from "@/static/homeimg/peison.svg"
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	import {
		storenamedetal,
		bulisliststore,
		applystorestore,
		storebalance,
		storecartdetals,
		storecart,
		gooddetals,
		goodscatelist,
		deleteGoods,
		decreaseGoods,
		goodattr,
		storecollect,
		storecollectnum,
		storevlueuserbills,
		storeconcern,
		vipaccount
	} from "@/api/home.js"
	const {
		mescrollInit,
		downCallback,
		getMescroll
	} = useMescroll(onPageScroll, onReachBottom)
	const storlist = reactive({
		list: []
	})
	const props = defineProps({
		headtals: {
			default: '{}',
			type: Object,
		},
	})
	onMounted(() => {
		setTimeout(() => {

		}, 200)

	})
	//预览图片
	const previewImg = (imgUrlList, index) => {
		console.log(imgUrlList, index)
		let imgsArray = [];
		for (let i = 0; i < imgUrlList.length; i++) {
			if (imgUrlList[i].videoUrl == "") {
				imgsArray.push(imgUrlList[i].imgUrl);
			}
		}
		uni.previewImage({
			current: index,
			urls: imgUrlList,
			longPressActions: {
				// itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function(data) {
					//console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			}
		});
	}
	//查看营业执照
	const gotoimg = () => {
		if (props.headtals.businessLicense == "" || props.headtals.businessLicense == null) {
			uni.showToast({
				title: "商家暂未上传"
			})
		} else {
			uni.navigateTo({
				url: "/pages/index/anworedimg?url=" + props.headtals.businessLicense
			})
		}
	}
	const dayweek = {
		0: '周日',
		1: '周一',
		2: '周二',
		3: '周三',
		4: '周四',
		5: '周五',
		6: '周六',
	}
	const makeCall = (e) => {
		uni.makePhoneCall({
			phoneNumber: e,
			success: (res) => {
				console.log('调用成功!')
			},
			fail: (res) => {
				console.log('调用失败!')
			}
		});
	}
	const emit = defineEmits(['isprop']);
	const phoneopen = () => {
		console.log("111111")
		emit('isprop', isphoneprop.value)
	}
	const closephone = () => {
		console.log("2222")
		isphoneprop.value = false
		emit('isprop', isphoneprop.value)
	}
	const goto = (e) => {
		uni.navigateTo({
			url: e
		})
	}
	// const gotoimg = () => {
	// 	uni.navigateTo({
	// 		url: "/pages/index/anworedimg?url=" + props.headtals.businessLicense
	// 	})
	// }
</script>

<style scoped lang="scss">
	.scollsas {
		position: relative;
		bottom: 56rpx;
	}

	.busnname {
		margin-top: 10rpx;
		background-color: #fff;
		padding: 30rpx 0rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 32rpx;
		color: #000000;
		border-bottom: 1px solid #F0F0F0;

		.addres {
			margin: 0 20rpx;
			width: calc(100% - 140rpx);
		}

		.telnuber {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 30rpx;
			background-color: #FFF6EE;
			width: 62rpx;
			height: 62rpx;
			border-radius: 50%;
		}
	}

	.busnsimglist {
		background-color: #fff;
		padding: 30rpx 20rpx;
		padding-right: 0;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 32rpx;
		color: #000000;

		.imglsitscoll {
			display: flex;
			flex-wrap: nowrap;
			overflow-x: scroll;
			margin-top: 15rpx;
		}

		.imglists {
			width: 190rpx;
			height: 140rpx;
			border-radius: 5rpx;
			margin-right: 20rpx;
		}
	}

	.busnname {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx 0rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 32rpx;
		color: #000000;
		border-bottom: 1px solid #F0F0F0;

		.addres {
			margin: 0 20rpx;
			width: calc(100% - 140rpx);
		}

		.telnuber {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 30rpx;
			background-color: #FFF6EE;
			width: 62rpx;
			height: 62rpx;
			border-radius: 50%;
		}
	}

	.scollsas {
		position: relative;
		bottom: 56rpx;
	}

	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.busnabottom {
		margin-top: 20rpx;
		padding: 0 20rpx;
		background-color: #fff;
		font-size: 28rpx;
		font-family: PingFang SC;

		.spsbiws {
			// padding: 20rpx 0;
			display: flex;
			align-items: center;

			.titlkd {
				font-size: 28rpx;
				margin-left: 10rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			.spstext {
				color: #393939;
			}
		}

		.spsbiw {
			height: 86rpx;
			line-height: 86rpx;
			// border-bottom: 1px solid #EFEFEF;
			display: flex;
			justify-content: space-between;
		}
	}

	.wordpid {
		word-break: break-all;
	}

	.wordnowarp {
		white-space: nowrap;
	}

	.board {
		word-wrap: break-word;
	}

	.borderbototm {
		border-bottom: 1rpx solid #efefef;
	}
</style>